<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
    <script>
        //前置知识:CSS选择器
        //使用获取元素的api
    //   querySelector 就会返回多个被选中元素中的第一个(第一个出现的元素)
  	//   querySelectorAll,就会把选中的多个元素以数组的形式,全都返回回来

        //选中的结果是一个"元素",元素就是element,简称elem
        let elem = document.querySelector('div');
        console.log(elem);
        //这里是选中最先出现的div元素,也就是parent,打印的结果是一个代码片段.
        //console.log在打印元素对象的时候,会自动的把打印内容转成对应的html片段,方便程序员观察
        elem = document.querySelectorAll('div');
        console.log(elem);
        //NodeList(4) [div.parent, div.child, div.child, div.child]
    //     querySelextALL严格来说,返回的不是数组(Array),而是一个NodeList.
    // 但是这个NodeList,使用和Array基本一样.(也是通过length获取长度,也是通过[]来取下标)

    // 像NodeList这种,本来是个对象,但是用法又和数组差不多,这种对象称为"维数组","伪装了一个数组"

        
   </script>
</body>
</html>